<template>
  <div class="dailyTrainTicket">
    <a-layout-content
      :style="{
        background: '#fff',
        padding: '24px',
        margin: 0,
        minHeight: '280px',
      }"
      class="layout-content"
    >
      <a-space>
        <date-time-select v-model="search.date"></date-time-select>
        <train-code-input v-model="search.code"></train-code-input>
        <station-select
          :station="{
            label: '始发站',
            id: 'start',
            message: '始发站不能为空',
            placeholder: '请选择始发站',
          }"
          @change="startStation"
        ></station-select>
        <station-select
          :station="{
            label: '终点站',
            id: 'end',
            message: '终点站不能为空',
            placeholder: '请选择终点站',
          }"
          @change="endStation"
        ></station-select>

        <a-button type="primary" @click="flush"> 查找 </a-button>
      </a-space>

      <!-- 列表 -->
      <a-table
        :columns="columns"
        :data-source="data"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
        :scroll="{ x: 1080, y: 400 }"
        :pagination="pagination"
        @change="handlePage"
        :loading="loading"
      >
      </a-table>
    </a-layout-content>
  </div>
</template>

<script>
import { getPage } from "@/api/dailyTrainTicket";
import { notification } from "ant-design-vue";
import "ant-design-vue/lib/notification/style/css";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
import duration from "dayjs/plugin/duration";
import TrainCodeInput from "@/components/TrainCodeInput.vue";
import DateTimeSelect from "@/components/DateTimeSelect.vue";
import StationSelect from "@/components/StationSelect.vue";

export default {
  name: "dailyTrainTicket",
  components: { TrainCodeInput, DateTimeSelect, StationSelect },
  data() {
    return {
      form: this.$form.createForm(this, { name: "coordinated" }),
      loading: false,
      code: "",
      description: "",
      locale: zhCN,
      pagination: {
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"],
        showTotal: (total, range) =>
          "显示" +
          range[0] +
          " ~ " +
          range[1] +
          "条记录，共" +
          total +
          "条记录",
        pageSize: 10,
        current: 1,
        total: 0,
      },
      columns: [
        {
          title: "日期",
          dataIndex: "date",
          key: "date",
          align: "center",
          width: 150,
        },
        {
          title: "车次编号",
          dataIndex: "trainCode",
          key: "trainCode",
          align: "center",
          width: 150,
        },
        {
          title: "车站",
          dataIndex: "station",
          key: "station",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return `${record.start} - ${record.end}`;
          },
        },
        {
          title: "站序",
          dataIndex: "index",
          key: "index",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return `${record.startIndex} - ${record.endIndex}`;
          },
        },
        {
          title: "时间",
          dataIndex: "time",
          key: "time",
          align: "center",
          width: 200,
          customRender: (text, record) => {
            return `${record.startTime} - ${record.endTime}`;
          },
        },
        {
          title: "历时",
          dataIndex: "periodTime",
          key: "periodTime",
          align: "center",
          width: 200,
          customRender: (text, record) => {
            dayjs.extend(customParseFormat);
            dayjs.extend(duration);
            let diff = dayjs(record.endTime, "HH:mm:ss").diff(
              dayjs(record.startTime, "HH:mm:ss")
            );
            if (diff < 0) {
              diff = dayjs
                .duration(24 * 60 * 60 * 1000 + diff)
                .asMilliseconds();
            }
            return dayjs.duration(diff).format("HH:mm:ss");
          },
        },
        {
          title: "一等座余票",
          dataIndex: "ydz",
          key: "ydz",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === 0 ? "--" : text;
          },
        },
        {
          title: "一等座票价",
          dataIndex: "ydzPrice",
          key: "ydzPrice",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === 0 ? "--" : text;
          },
        },
        {
          title: "二等座余票",
          dataIndex: "edz",
          key: "edz",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === 0 ? "--" : text;
          },
        },
        {
          title: "二等座票价",
          dataIndex: "edzPrice",
          key: "edzPrice",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === 0 ? "--" : text;
          },
        },
        {
          title: "软卧余票",
          dataIndex: "rw",
          key: "rw",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === 0 ? "--" : text;
          },
        },
        {
          title: "软卧票价",
          dataIndex: "rwPrice",
          key: "rwPrice",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === 0 ? "--" : text;
          },
        },
        {
          title: "硬卧余票",
          dataIndex: "yw",
          key: "yw",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === 0 ? "--" : text;
          },
        },
        {
          title: "硬卧票价",
          dataIndex: "ywPrice",
          key: "ywPrice",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === 0 ? "--" : text;
          },
        },
        {
          title: "新增时间",
          dataIndex: "createTime",
          key: "createTime",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === 0 ? "--" : text;
          },
        },
        {
          title: "修改时间",
          dataIndex: "updateTime",
          key: "updateTime",
          align: "center",
          width: 150,
        },
      ],
      data: [],
      search: {
        code: "",
        date: "",
        start: "",
        end: "",
      },
    };
  },
  mounted() {
    this.handlePage();
  },
  methods: {
    flush() {
      this.handlePage();
    },
    handlePage(pagination, filters, sorter) {
      this.loading = true;
      const pageNo = pagination === undefined ? 1 : pagination.current;
      const pageSize = pagination === undefined ? 10 : pagination.pageSize;
      getPage(pageNo, pageSize, this.search).then((res) => {
        this.loading = false;
        if (res.code === 200) {
          //设置每页码和每页显示数
          this.pagination.current = pageNo;
          this.pagination.pageSize = pageSize;
          //获取结果
          const dailyTrainTicketList = res.data.data;
          this.data = dailyTrainTicketList;
          this.pagination.total = res.data.total;
        } else {
          notification.error({
            message: "消息提示",
            description: res.message,
            duration: 3,
          });
        }
      });
    },
    startStation(station) {
      this.search.start = station;
    },
    endStation(station) {
      this.search.end = station;
    },
  },
};
</script>

<style lang="less" scoped>
.ant-input {
  width: 300px;
}
.ant-table-wrapper {
  margin-top: 20px;
}
/deep/ .ant-table-header {
  padding-bottom: 0 !important;
}
/deep/ .ant-select-selection--single {
  width: 195px !important;
}
/deep/ .ant-table-thead > tr > th {
  border-bottom: 0 !important;
}
.stationItem {
  display: flex;
  margin-bottom: 0;
}
</style>
